<template>
     <div class="layers2">
          <div
               class="layersItem"
               v-for="(item, index) in 3"
               :key="item"
               :style="getItemStyle(index)"
               :data-index="index"
          >
               <div class="itemLeft"></div>
               <div class="itemRight">4M隧道</div>
          </div>
     </div>
</template>

<script setup lang="ts">
// 计算每个项的位置样式
const getItemStyle = (index: number) => {
     switch (index) {
          case 0:
               return {
                    left: '0%',
                    top: '10%',
               }
          case 1:
               return {
                    left: '45%',
                    bottom: '15%',
               }
          case 2:
               return {
                    right: '5%',
                    bottom: '40%',
               }

          default:
               return {}
     }
}
</script>

<style scoped lang="scss">
// 定义动画变量
$item-animation-duration: 0.7s;
$item-animation-delay: 0.15s;

.layers2 {
     width: 100%;
     height: 100%;
     background: url('@/assets/images/largeScreen/layer2底座.png') no-repeat
          center center;
     background-size: 100% 100%;
     position: relative;
     // 优化的脉冲动画效果
     animation-delay: 1.5s;
     animation: pulseLayer2 5s ease-in-out infinite;
}

.layersItem {
     width: auto;
     height: auto;
     display: flex;
     align-items: center;
     position: absolute;
     font-size: 0.6vw; // 改为视口宽度的1%
     color: #f4f4f4;
     opacity: 0;
     transform: scale(0.95);
     // 为每个元素设置不同的动画延迟
     animation: fadeInScale $item-animation-duration ease-out forwards;
     transition: all 0.3s ease;
     cursor: pointer;

     // 根据索引设置不同的动画延迟
     &[data-index='0'] {
          animation-delay: $item-animation-delay * 1;
     }

     &[data-index='1'] {
          animation-delay: $item-animation-delay * 2;
     }

     &[data-index='2'] {
          animation-delay: $item-animation-delay * 3;
     }

     // 悬停效果
     &:hover {
          transform: scale(1.05) !important;
          z-index: 10;
     }

     .itemLeft {
          // 改为相对单位，基于视口宽度
          width: 3vw;
          height: 3.7vw;
          // 文字竖型
          writing-mode: vertical-rl;
          display: flex;
          align-items: center;
          background: url('@/assets/images/largeScreen/layer2文字底座.png')
               no-repeat center center;
          background-size: 100% 100%;
          text-align: center;
          padding-top: 1vw; // 改为视口宽度的1.2%
          // 添加悬停效果
          transition: all 0.3s ease;

          &:hover {
               filter: brightness(1.2);
               transform: scale(1.05);
          }
     }

     .itemRight {
          color: #9ce4f1;
          background: url('@/assets/images/largeScreen/layer2文字背景.png')
               no-repeat center center;
          background-size: 100% 100%;
          width: 5vw;
          height: 1.3vw;
          line-height: 1.3vw;
          text-align: center;
          position: absolute;
          left: -85%;
          transform: translate(-50%, -50%);
          // 添加文字发光效果
          text-shadow: 0 0 3px rgba(156, 228, 241, 0.5);
          transition: all 0.3s ease;

          &:hover {
               text-shadow: 0 0 8px rgba(156, 228, 241, 0.8);
               transform: translate(-50%, -50%) scale(1.1);
          }
     }

     &:nth-child(2) {
          .itemRight {
               left: 190% !important;
          }
     }

     &:nth-child(3) {
          .itemRight {
               left: 190% !important;
          }
     }
}

// 动画定义
@keyframes fadeInScale {
     0% {
          opacity: 0;
          transform: scale(0.95);
     }
     100% {
          opacity: 1;
          transform: scale(1);
     }
}

@keyframes pulseLayer2 {
     0% {
          transform: scale(1);
          opacity: 1;
     }

     33% {
          transform: scale(1.02);
          opacity: 0.96;
     }

     66% {
          transform: scale(1.03);
          opacity: 0.98;
     }

     100% {
          transform: scale(1);
          opacity: 1;
     }
}
</style>
